<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Library Layout Design</title>
		<link rel="stylesheet" type="text/css" href="css/libhome.css" />
		<link rel="stylesheet" type="text/css" href="css/imgpreview.css" />
		<link rel="stylesheet" type="text/css" href="css/tab.css" />
		<link rel="stylesheet" type="text/css" href="css/libcommon.css" />
	</head>
	<body>
		<div class="fixedheader">
			Header - 顶部导航栏 固定显示，不可隐藏<br>
			<a href="http://192.168.10.7/searchmain.html">
			    <button>返回搜索</button>
			</a>
			<br>
			<button>功能 1</button>
			<button>功能 2</button>
		</div>

		<div class="content">
			<aside class="sider" id="test">
				<button id="btn">三</button>
				Header - 侧边信息栏 收缩显示<br>
				主要展示该资源相关的项目，标签等<br>
				<br>
				<li>TAG:
					<a href="#">Charcter</a>
					<a href="#">Fantasy Style</a>
					<a href="#">Boot</a>
				</li>
				<li>Project:<a href="#">FAITH</a></li>
			</aside>

			<script type="text/javascript">
				var box = document.getElementById("test")
				var btn = document.getElementById("btn")
				btn.onclick = function() {
					if (box.offsetLeft == 0) {
						box.style['margin-left'] = -20 + "%"
					} else {
						box.style['margin-left'] = 0 + "px"
					}
				}
			</script>

			<h1>FAITHB01 <span style="font-size:5px;">--资源名称，暂定为 项目名+编号</span></h1>
			<div style="height:50vh">
				<div id="Description" style="z-index: 100; position: absolute; padding: 50px">
					<span style="color: #330099; font-size: 100px;">预览图</span>
				</div>
			<img id="asset_preview" class="left" src="img/preview.jpg">
			<div class="preview_mask" id="mask">
				<h1>细节放大</h1>
			</div>	
			<script type="text/javascript">
				function isIn(el, p) {
					var d_left = el.offsetLeft;
					var d_top = el.offsetTop;
					var d_width = el.clientWidth;
					var d_height = el.clientHeight;

					if (p.x < d_left || p.y < d_top || p.x > (d_left + d_width) || p.y > (d_top + d_height))
						//不在内				
						return false;
					else
						return true;
				}
				var msk = document.getElementById("mask");
				var img_main = document.getElementById("asset_preview");
				var isInSmall = false;
				var isInBig = false;
				img_main.onmousemove = function(e) {
					//boolean b = (e.offsetX > 50 && e.offsetX < (img_main.clientWidth - 50) && e.offsetY > 50 && e.offsetY < (img_main.clientHeight - 50));


					if (!isInSmall && e.offsetX > 50 && e.offsetX < (img_main.clientWidth - 50) && e.offsetY > 50 && e.offsetY < (
							img_main.clientHeight - 50)) {
						console.log("Start Scale");
						isInSmall = true;
						msk.style.display = "block";
						msk.style.left = "0px";
						msk.style.top = "0px";
						msk.style.left = e.offsetX - 250 + "px";
						msk.style.top = e.offsetY - 250 + "px";
					}
				}

				msk.onmousemove = function(e) {

					var mouse = {
						x: e.clientX,
						y: e.clientY,
					}

					if (!isIn(img_main, mouse)) {
						msk.style.display = "none";
						isInSmall = false;
						return;
					}

					var newpos = {
						x: parseInt(msk.style.left) - 250 + e.offsetX,
						y: parseInt(msk.style.top) - 250 + e.offsetY
					};

					msk.style.left = newpos.x + "px";
					msk.style.top = newpos.y + "px";
					//console.log(e.offsetX +","+e.offsetY);
				}
				msk.onmouseout = function() {
					msk.style.display = "none";
					isInSmall = false;
				}
			</script>
			
			
			</img>
			
			
			<div id="asset_info" class="right">
				<div id="tabhead">
				<ul>
				<li id="L0" onclick="Tab(0)" style="background-color: #C47200;"><a href="#">资源简介</a></li>
				 <li id="L1" onclick="Tab(1)"><a href="#">Maya</a></li>
				 <li id="L2" onclick="Tab(2)"><a href="#">Max</a></li>
				 <li id="L3" onclick="Tab(3)"><a href="#">SP</a></li>
				 <li id="L4" onclick="Tab(4)"><a href="#">PS</a></li>
				</ul>
				</div>
				
				<div id="d0" class="tabInfo" style="background-color: #C47200;display: block;">
				<ul>
				  <li>分别展示该类型资源的各项属性大纲</li>
				  <li>对于网格模型会有点面信息，对于贴图纹理等会有通道信息</li>
				  可以通过点击选项卡快速切换和查看各资源内容，相应地，左侧预览图也可能有相应变化。
				</ul>
				</div>
				
				<div id="d1" class="tabInfo" style="display: none;">
				<ul>
				  <li>Vertices:1000</li>
				  <li>Polygons:1000</li>
				  <li>In Lib Date:2020-01-01</li>
				  <li>File Size:55MB</li>
				  <li>File Format:.ma</li>
				  <li>Soft Version:Maya 2020</li>
				</ul>
				</div>
				<div id="d2" class="tabInfo">
				<ul>
					<li>Vertices:1000</li>
					<li>Polygons:1000</li>
					<li>In Lib Date:2020-01-01</li>
					<li>File Size:60MB</li>
					<li>File Format:.max</li>
					<li>Soft Version:Max 2019</li>
				</ul>
				</div>
				<div id="d3" class="tabInfo">
				<ul>
					<li>In Lib Date:2020-01-01</li>
					<li>File Size:100MB</li>
					<li>File Format:.SPP</li>
					<li>Soft Version:SP 2020.1.1</li>
				</ul>
				</div>
				<div id="d4" class="tabInfo">
				<ul>
					<li>Color Format:72dpi 8bit</li>
					<li>In Lib Date:2020-01-01</li>
					<li>File Size:5.6MB</li>
					<li>File Format:.PSD</li>
					<li>Soft Version:SP 2020.1.1</li>
				</ul>
				</div>
			<script language="javascript">
			function Tab(num)
			{
			    var i;
			    for(i=1;i<=4;i++)
			    {
			        if(i==num)
			           document.getElementById("d"+i).style.display="block";
			         else
			           document.getElementById("d"+i).style.display="none";
			    }
			}
			</script>
			
			</div>
		</div>
		<div class="download_setting">
			可以获取的资源列表:<br>
			<input type="checkbox" name="maya" value="maya" checked="checked" style="left: 0;">Maya(55.0MB) -- 这里可能会有一些附加信息的预留</input><br>
			<input type="checkbox" name="maya" value="maya" checked="checked" style="left: 0;">Max(60.0MB)</input><br>
			<input type="checkbox" name="maya" value="maya" style="left: 0;">SP(100.0MB)</input><br>
			
			<button style="position:absolute;width: 20%;height: 10%;right:20%;bottom:10%;background-color: #99CCCC;font-size: 30px;cursor: pointer;">获取所选资源</button>
		</div>
		
		<div id="footer" style="height: 50px;">

		</div>
		
		</div>
	</body>
</html>
